<script lang="ts" setup>
import { ref, onMounted, h } from 'vue';
import { Card, Table, Button, Tag, Space, Input, Select, DatePicker } from 'ant-design-vue';
import type { TableColumnsType } from 'ant-design-vue';

interface InvoiceRecord {
  id: string;
  invoiceNo: string;
  type: 'vat_ordinary' | 'vat_special' | 'electronic';
  amount: number;
  taxAmount: number;
  totalAmount: number;
  buyerName: string;
  buyerTaxNo: string;
  status: 'draft' | 'issued' | 'sent' | 'confirmed';
  issueDate: string;
  dueDate: string;
}

const loading = ref(false);
const searchText = ref('');
const typeFilter = ref('');
const statusFilter = ref('');
const invoiceData = ref<InvoiceRecord[]>([]);

const columns: TableColumnsType<InvoiceRecord> = [
  {
    title: '发票号码',
    dataIndex: 'invoiceNo',
    key: 'invoiceNo',
    width: 150,
  },
  {
    title: '发票类型',
    dataIndex: 'type',
    key: 'type',
    width: 120,
    customRender: ({ record }) => {
      const typeMap = {
        vat_ordinary: '增值税普通发票',
        vat_special: '增值税专用发票',
        electronic: '电子发票',
      };
      return typeMap[record.type];
    },
  },
  {
    title: '购买方',
    key: 'buyer',
    width: 200,
    customRender: ({ record }) => {
      return h('div', {}, [
        h('div', { class: 'font-medium' }, record.buyerName),
        h('div', { class: 'text-gray-500 text-sm' }, record.buyerTaxNo)
      ]);
    },
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount',
    width: 100,
    customRender: ({ text }) => `¥${text.toLocaleString()}`,
  },
  {
    title: '税额',
    dataIndex: 'taxAmount',
    key: 'taxAmount',
    width: 100,
    customRender: ({ text }) => `¥${text.toLocaleString()}`,
  },
  {
    title: '价税合计',
    dataIndex: 'totalAmount',
    key: 'totalAmount',
    width: 120,
    customRender: ({ text }) => {
      return h('span', { class: 'font-medium text-blue-600' }, `¥${text.toLocaleString()}`);
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
    customRender: ({ record }) => {
      const statusMap = {
        draft: { color: 'default', text: '草稿' },
        issued: { color: 'processing', text: '已开具' },
        sent: { color: 'warning', text: '已发送' },
        confirmed: { color: 'success', text: '已确认' },
      };
      const status = statusMap[record.status];
      return h(Tag, { color: status.color }, status.text);
    },
  },
  {
    title: '开票日期',
    dataIndex: 'issueDate',
    key: 'issueDate',
    width: 120,
  },
  {
    title: '到期日期',
    dataIndex: 'dueDate',
    key: 'dueDate',
    width: 120,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    customRender: ({ record }) => {
      const buttons = [
        h(Button, { type: 'link', size: 'small' }, '查看'),
        h(Button, { type: 'link', size: 'small' }, '下载')
      ];
      
      if (record.status === 'issued') {
        buttons.push(h(Button, { type: 'link', size: 'small' }, '发送'));
      }
      
      return h(Space, {}, buttons);
    },
  },
];

const fetchInvoiceData = async () => {
  loading.value = true;
  try {
    // TODO: 调用API获取发票数据
    // 模拟数据
    invoiceData.value = [
      {
        id: '1',
        invoiceNo: 'INV202401150001',
        type: 'electronic',
        amount: 5000,
        taxAmount: 300,
        totalAmount: 5300,
        buyerName: '某某科技有限公司',
        buyerTaxNo: '91110000123456789X',
        status: 'confirmed',
        issueDate: '2024-01-15',
        dueDate: '2024-02-15',
      },
      {
        id: '2',
        invoiceNo: 'INV202401160001',
        type: 'vat_ordinary',
        amount: 8000,
        taxAmount: 480,
        totalAmount: 8480,
        buyerName: '另一家公司',
        buyerTaxNo: '91110000987654321Y',
        status: 'issued',
        issueDate: '2024-01-16',
        dueDate: '2024-02-16',
      },
    ];
  } catch (error) {
    console.error('获取发票数据失败:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchInvoiceData();
});
</script>

<template>
  <div class="p-5">
    <Card title="开票记录">
      <template #extra>
        <Button type="primary">开具发票</Button>
      </template>
      
      <!-- 搜索和筛选区域 -->
      <div class="mb-4 flex flex-wrap gap-4">
        <Input.Search
          v-model:value="searchText"
          placeholder="搜索发票号码或购买方"
          style="width: 200px"
          @search="fetchInvoiceData"
        />
        <Select
          v-model:value="typeFilter"
          placeholder="选择发票类型"
          style="width: 150px"
          allowClear
        >
          <Select.Option value="vat_ordinary">增值税普通发票</Select.Option>
          <Select.Option value="vat_special">增值税专用发票</Select.Option>
          <Select.Option value="electronic">电子发票</Select.Option>
        </Select>
        <Select
          v-model:value="statusFilter"
          placeholder="选择状态"
          style="width: 120px"
          allowClear
        >
          <Select.Option value="draft">草稿</Select.Option>
          <Select.Option value="issued">已开具</Select.Option>
          <Select.Option value="sent">已发送</Select.Option>
          <Select.Option value="confirmed">已确认</Select.Option>
        </Select>
        <DatePicker.RangePicker :placeholder="['开始时间', '结束时间']" />
        <Button @click="fetchInvoiceData">搜索</Button>
      </div>
      
      <!-- 发票记录表格 -->
      <Table
        :columns="columns"
        :data-source="invoiceData"
        :loading="loading"
        row-key="id"
        :pagination="{
          total: invoiceData.length,
          pageSize: 10,
          showSizeChanger: true,
          showQuickJumper: true,
        }"
      />
    </Card>
  </div>
</template>